<template>
  <j-modal
    :title="!titleStatus?null:getComponents('title')"
    :width="getWidth"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <component ref="realForm" @ok="submitCallback" @finish="finishCallback" :is="allComps[getComponents('componentsName')]" :disabled="disableSubmit" normal/>
    <template slot="footer" v-if="type===1">
      <a class="footer-model" @click="handleModal">下载数据模板</a>
      <a-button key="back" @click="handleCancel"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleOk"> 开始导入 </a-button>
    </template>
    <template slot="footer" v-else-if="type===7">
      <a-button key="back" @click="submitCallback">关闭</a-button>
    </template>
    <template slot="footer" v-else>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
    </template>
  </j-modal>
</template>

<script>
  import { downLoadMix } from '@/utils/export-util/util'
  import { exportWarningTemplate } from '@/api/warning/WarningData.js'
  import allComps from './index'
  export default {
    name: "HandleModal",
    data () {
      return {
        title:'',
        visible: false,
        disableSubmit: false,
        result: {},
        type: 1,
        allComps: allComps,
        downloadFileName: '预警速报-导入模板.xls',
        components: [
          {
            type: 1,
            title: '批量导入',
            componentsName: 'IntroductionModal'
          },
          {
            type: 2,
            title: '预警导出',
            componentsName: 'ExportForm'
          },
          {
            type: 3,
            title: '指派',
            componentsName: 'AssignForm'
          },
          {
            type: 4,
            title: '提示', //短信劝阻
            componentsName: 'BatchDissuadetForm'
          },
          {
            type: 5,
            title: '批量屏蔽',
            componentsName: 'ShieldDissuadetForm'
          },
          {
            type: 6,
            title: '指定数据',
            componentsName: 'TargetForm'
          },
          {
            type: 7,
            title: '导入完成',
            componentsName: 'StatusTips'
          },
        ],
      }
    },
    computed: {
      titleStatus() {
        if (Object.keys(this.result).length>0 && this.result.errorPhoneNum === 0 && this.result.errorPhoneList.length === 0) {
          return false
        } else {
          return true
        }
      },
      getWidth() {
        let width = 800;
        if(this.type===1 || this.type===4) {
          width = 600
        } else if(this.type===2) {
          width = 1000
        }
        return width
      }
    },
    watch: {
      visible: {
        immediate: true,
        deep: true,
        handler(val) {
          if(val) this.result = {}
        }
      }
    },
    methods: {
      add () {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.show();
        })
      },
      edit (record) {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.show(record);
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.submitForm();
      },
      submitCallback(){
        this.$emit('ok',this.type);
        this.visible = false;
      },
      finishCallback(data) {
        this.type = 7
        this.result = data
        if(data && Object.keys(data).length>0) {
          this.$nextTick(()=>{
            this.$refs.realForm.getDatas(data)
          })
        }
      },
      handleCancel () {
        this.close()
      },
      getComponents(key) {
        let item = this.components.find(obj=> {return obj.type == this.type})
        return item[key]
      },
      handleModal() {
        exportWarningTemplate().then(res => {
          if(res && res.size>0) {
            const fileName = '预警速报-导入模板.xls'
            downLoadMix(res, fileName)
          } else {
            this.$message.warn("模板不存在！")
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
/deep/.ant-modal-footer {
  position: relative;
  .footer-model {
    position: absolute;
    left: 20px;
    &::before {
      content: '*';
      color: #f5222d;
      margin-right: 5px;
    }
  }
}
</style>